<template>
	<view class="login-box">
		<view class="login-mask">
			<view class="login-top">
				<view class="prevent"></view>
				<view class="location">
					<view class="">
						<image src="/static/login/dingwei.png" />
					</view>
					<view class="" v-if="islocation == false">
						<text>
							{{ $t('login.loding') }}
						</text>
					</view>
					<view class="" v-else>
						<text>
							{{address}}
						</text>
					</view>
				</view>
				<image src="/static/login/logo.png" />
			</view>
			<view class="selse-box">
				<view class="selse" @click="Language(true)" :class="iscolor == true? 'col':''">
					中文
				</view>
				<view class="selse" @click="Language(false)" :class="iscolor == false? 'col':''">
					English
				</view>
			</view>
			<view class="login-protocol">
				<view class="">
					<u-checkbox-group @change="checkboxChange">
						<u-checkbox v-model="checked" shape="square"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view>
					{{ $t('login.deal') }}
					<text style="color: #ff7c00"
						v-on:click.stop="goTerms('applet_agreement_login')">{{ $t('login.clause') }}</text>
					{{ $t('login.sum') }}
					<text style="color: #ff7c00"
						v-on:click.stop="goTerms('applet_agreement_register')">{{ $t('login.privacy') }}</text>.
				</view>
			</view>
			<view class="submit-box">
				<view>
					<image src="/static/login/an.png" mode=""></image>
				</view>
				<view class="">
					{{ $t('login.promise') }}
				</view>
			</view>
			<view class="login-way">
				<view class="way">
					<view class="wx" @click="loginwx">
						<image src="/static/login/wx.png" />
					</view>
					<view class="face" @click="loginfacebook">
						<image src="/static/login/facebook.png" />
					</view>
				</view>
			</view>
			<view class="login-btn">
				<u-button type="primary" @click="gologin()" shape="circle">{{ $t('login.login') }}</u-button>
			</view>
		</view>
		<!-- 登录弹窗 -->
		<u-popup :show="show" mode="center" round="5" :closeOnClickOverlay="true" @close="close">
			<view class="login-popup">
				<view class="phone">
					<view class="image">
						<image src="../../static/login/p1.png" mode="heightFix"></image>
					</view>
					<u--input :placeholder="$t('login.phonet')" border="none" v-model="phone"></u--input>
				</view>
				<view class="code">
					<view class="image">
						<image src="../../static/login/p2.png" mode="heightFix"></image>
					</view>
					<u--input :placeholder="$t('login.codet')" border="none" v-model="code"></u--input>
				</view>
				<view class="btn">
					<u-button type="primary" :text="$t('login.logint')" @click="login" shape="circle"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 语言选择
				iscolor: false,
				// 是否同意协议
				checked: false,
				//用户是否同意获取定位
				islocation: false,
				//位置
				address: '',
				//是否显示
				show: false,
				// 手机号
				phone: '',
				// 验证码
				code: '',
				// 获取验证码配置
				tips: '',
				changeText: 'xs',
				seconds: 60,
				adcode: ""
			}
		},
		onLoad() {
			//获取经纬度
			this.gettingdata()
		},
		methods: {
			loginfacebook() {
				if (this.checked == false) {
					uni.showToast({
						title: this.$t('login.massage'),
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let app = this
				uni.login({
					provider: 'facebook',
					success: function(loginRes) {
						console.log(loginRes)
						let params = {
							openid: loginRes.code,
							map: 'applet_appfblogin',
							name: loginRes.name,
							areaname: app.adcode,
							imageUrl: loginRes.imageUrl
						}
						app.$Request({
							method: 'GET',
							data: params
						}).then(res => {
							if (res.data.ec == 200) {
								uni.hideLoading()
								uni.setStorageSync('token', res.data.data.info.m_token)
								uni.showToast({
									title: app.$t('login.success'),
									icon: 'none'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}, 800)
							} else {
								console.log(res)
								uni.hideLoading()
								uni.showToast({
									title: res.data.em,
									icon: 'none'
								})
							}
						})
					}
				});
			},
			loginwx() {
				if (this.checked == false) {
					uni.showToast({
						title: this.$t('login.massage'),
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let app = this
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: function(loginRes) {
						console.log(loginRes)
						let params = {
							code: loginRes.code,
							map: 'applet_appwxlogin',
							areaname: app.address,
							adcode: app.adcode
						}
						app.$Request({
							method: 'GET',
							data: params
						}).then(res => {
							console.log(res.data)
							if (res.data.ec == 200) {
								uni.hideLoading()
								uni.setStorageSync('token', res.data.data.info.m_token)
								uni.showToast({
									title: app.$t('login.success'),
									icon: 'none'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}, 800)
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.data.em,
									icon: 'none'
								})
							}
						})
					}
				});
			},
			goTerms(map) {
				uni.navigateTo({
					url: '/pages/Agreement/Agreement?map=' + map
				})
			},
			login() {
				if (this.phone == '') {
					uni.showToast({
						title: this.$t('login.phone'),
						icon: 'none'
					})
					return
				}
				if (this.code == '') {
					uni.showToast({
						title: this.$t('login.code'),
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					phone: this.phone,
					code: this.code,
					map: 'applet_login'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						console.log(res)
						uni.setStorageSync('token', res.data.data.info.m_token)
						uni.showToast({
							title: this.$t('login.success'),
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 800)
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.data.em,
							icon: 'none'
						})
					}
				})
			},
			close() {
				this.show = false
			},
			checkboxChange(n) {
				this.checked = !this.checked
			},
			gologin() {
				if (this.checked == false) {
					uni.showToast({
						title: this.$t('login.massage'),
						icon: 'none'
					})
					return
				}
				this.show = true
			},
			//获取经纬度
			gettingdata() {
				let app = this
				// #ifdef APP
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						// 储存
						uni.setStorageSync('longitude', res.longitude)
						uni.setStorageSync('latitude', res.latitude)
						//换取地区id
						app.getshopid()
						//换取地区
						app.getaddress()
					}
				});
				// #endif
				// #ifdef H5
				uni.setStorageSync('longitude', 120.09919)
				uni.setStorageSync('latitude', 35.908379)
				this.getaddress()
				// #endif
			},
			getshopid() {
				let params = {
					map: "applet_address_now"
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res, '地区id')
						this.adcode = res.data.data.adcode
						uni.setStorageSync('adcode', res.data.data.adcode)
					} else {
						this.adcode = 6
						uni.setStorageSync('adcode', res.data.data.adcode)
					}
				})
			},
			getaddress() {
				let params = {
					map: "applet_baidu_api_country"
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.islocation = true
						this.address = res.data.data
						console.log(res)
						if (this.address == '中国') {
							uni.setStorageSync('address', 'China')
						} else {
							uni.setStorageSync('address', this.address)
						}
					} else {
						this.address = '中国'
						if (this.address == '中国') {
							uni.setStorageSync('address', 'China')
						} else {
							uni.setStorageSync('address', this.address)
						}
						uni.showToast({
							title: this.$t('login.msg'),
							icon: 'none'
						})
					}
				})
			},
			Language(e) {
				// true中文false英文
				this.iscolor = e
				if (e == true) {
					this._i18n.locale = 'zh';
					uni.setStorageSync('lang', 'zh');
				} else {
					this._i18n.locale = 'en';
					uni.setStorageSync('lang', 'en');
				}
				this.Tabbar()
			},
			Tabbar() {
				uni.setTabBarItem({
					index: 0,
					text: this.$t('tabbar.home'),
				})
				uni.setTabBarItem({
					index: 1,
					text: this.$t('tabbar.NewsInfo'),
				})
				uni.setTabBarItem({
					index: 2,
					text: this.$t('tabbar.PostInfo'),
				})
				uni.setTabBarItem({
					index: 3,
					text: this.$t('tabbar.BizCircles'),
				})
				uni.setTabBarItem({
					index: 4,
					text: this.$t('tabbar.MyCentre'),
				})
			},
		}
	}
</script>

<style lang="scss">
	.login-box {
		width: 100%;
		height: 100vh;
		background: url("/static/login/bg.jpg") center center no-repeat;
		background-size: 100% 100%;

		.login-popup {
			width: 80vw;
			padding: 20rpx;

			image {
				width: 32rpx;
				height: 52rpx;
			}

			.phone {
				margin-top: 40rpx;
				display: flex;
				border-bottom: 2rpx solid #e4e3e4;

				.image {
					width: 50rpx;
				}
			}

			.code {
				margin-top: 40rpx;
				display: flex;
				border-bottom: 2rpx solid #e4e3e4;
				position: relative;

				.code-btn {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;

					.btn {
						padding: 8rpx;
						background-color: #00dd00;
						color: #fff;
						font-size: 24rpx;
						border-radius: 10rpx;
					}
				}

				.image {
					width: 50rpx;
				}
			}

			.btn {
				margin-top: 60rpx;
			}
		}

		.login-mask {
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.6);
			background-size: auto 100%;

			.selse-box {
				margin-top: 30rpx;
				padding: 0 120rpx;
				display: flex;
				justify-content: space-between;

				.selse {
					color: #fff;
					text-align: center;
					width: 200rpx;
					height: 80rpx;
					line-height: 80rpx;
					background-color: rgba(186, 186, 186, 0.4);
					border-radius: 10rpx;
				}

				.col {
					background-color: #1f8dea;
				}
			}

			.login-top {
				width: 100%;
				text-align: center;

				.prevent {
					height: 80rpx;
				}

				image {
					width: 32.53vw;
					height: 36.9vw;
					margin-top: 40rpx;
				}

				.location {
					image {
						width: 4vw;
						height: 5vw;
					}

					text {
						font-size: 4vw;
						font-weight: 800;
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			.login-way {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-top: 5vw;

				.way {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					view {
						display: inline-block;
						width: 18.4vw;
						height: 18.4vw;
						margin: 2.666vw;
						text-align: center;
					}

					image {
						width: 14.4vw;
						height: 14.4vw;
					}
				}
			}

			.login-btn {
				width: 40%;
				margin-top: 40rpx;
				float: right;
				margin-right: 30rpx;
			}

			.login-protocol {
				width: 89.3%;
				padding: 1vw;
				display: flex;
				color: #fff;
				margin: 0 auto;
				font-size: 24rpx;
				margin-top: 60rpx;
			}

			.submit-box {
				width: 89.3%;
				box-sizing: border-box;
				margin: 0 auto;
				margin-top: 7vw;
				font-size: 24rpx;
				display: flex;
				color: #fff;

				image {
					width: 45rpx;
					height: 45rpx;
				}
			}
		}
	}
</style>
